<template>
  <div>
    <m-tabbar id="m_tabbar" v-model="select">
      <m-tabbar-item id='PageOne' isRouter>
        <img style="width: 20.5px;height: 22px" src="../../assets/Image/page1.png" alt="" slot="icon-normal">
        <img style="width: 20.5px;height: 22px" src="../../assets/Image/page11.png" alt="" slot="icon-active">
        首页
      </m-tabbar-item>
      <m-tabbar-item id='PageTwo' isRouter>
        <img style="width: 19.5px;height: 22px" src="../../assets/Image/page2.png" alt="" slot="icon-normal">
        <img style="width: 19.5px;height: 22px" src="../../assets/Image/page22.png" alt="" slot="icon-active">
        歌单
      </m-tabbar-item>
      <m-tabbar-item id='PageThree' isRouter>
        <img style="width: 22.5px;height: 22px" src="../../assets/Image/page3.png" alt="" slot="icon-normal">
        <img style="width: 22.5px;height: 22px" src="../../assets/Image/page33.png" alt="" slot="icon-active">
        热架
      </m-tabbar-item>
      <m-tabbar-item id='PageFour' isRouter>
        <img style="width: 22px;height: 22px" src="../../assets/Image/page4.png" alt="" slot="icon-normal">
        <img style="width: 22px;height: 22px" src="../../assets/Image/page44.png" alt="" slot="icon-active">
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
import mTabbar from './tabbar'
import mTabbarItem from './tabbar-item'

export default {
  components: {
    mTabbar,
    mTabbarItem
  },
  data () {
    return {
      select: 'Home'
    }
  }
}
</script>

<style lang="scss" scoped>
  #m_tabbar {
    .m-tabbar-item {
      position: relative;
      width: 25%;
      z-index: 1111;
      a {
        color: #949494;
        text-decoration: none;
      }
    }
    .m-tabbar-item.is-active .m-tabbar-item-text {
      color: #20a0ff;
    }
    .m-tabbar-item.is-active .m-tabbar-item-text span a {
      color: #20a0ff;
    }
  }
</style>
